import { Button, Form } from 'antd';
import { useState } from 'react';
import { YmTable, YmTablePorps } from 'ym-design';
// 表格字段类型
type TableRecord = {
  name: string;
  age: number;
  gender: '男' | '女';
  email: string;
  address: string;
  create_time: string;
  guid: string;
  hidden?: boolean;
};
// 查询字段类型
type SearchValue = {
  name: string;
  gender: string;
};

const mockData = new Array(100).fill(1).map<TableRecord>((v, index) => {
  return {
    name: `用户${index}`,
    age: Math.floor(Math.random() * 100),
    gender: Math.random() > 0.6 ? '女' : '男',
    email: Math.random() + '@abc.com',
    address: `地址${index}`,
    create_time: '随机时间',
    guid: `dasklfjaf${index}`,
  };
});

const DEFAULTCOLUMS: YmTablePorps<TableRecord, SearchValue>['columns'] = [
  {
    dataIndex: 'name',
    title: '姓名1',
    key: 'name',
    fixed: 'left',
    width: 80,
    hidden: true, //是否隐藏
  },
  {
    dataIndex: 'age',
    title: '年龄',
    key: 'age',
    width: 100,
    hidden: true,
  },
  {
    dataIndex: 'gender',
    title: '性别',
    key: 'gender',
    width: 80,
  },
  {
    dataIndex: 'email',
    title: '邮箱',
    key: 'email',
    width: 300,
  },
  {
    dataIndex: 'address',
    title: '地址',
    key: 'address',
    width: 300,
  },
  {
    dataIndex: 'create_time',
    title: '创建时间',
    key: 'create_time',
    width: 300,
  },
  {
    key: '_operate',
    title: '操作', //操作列key 必须设置为'_operate'
    width: 200,
  },
];

export default function () {
  const [form] = Form.useForm();
  const [columns, setColumns] =
    useState<YmTablePorps<TableRecord, SearchValue>['columns']>(DEFAULTCOLUMS);

  //列显示回调函数
  const handleColumnsChage = (newColumns: any[], type: any) => {
    if (type.type !== 'reset') {
      setColumns(newColumns);
    } else {
      setColumns(DEFAULTCOLUMS);
    }
  };

  return (
    <YmTable<TableRecord, SearchValue>
      columns={columns}
      rowKey="guid"
      searchForm={{
        formItems: [
          {
            name: 'name',
            label: '名称',
            valueType: {
              type: 'input',
            },
          },
          {
            name: 'gender',
            label: '性别',
            valueType: {
              type: 'select',
              selectProps: {
                options: [
                  {
                    label: '男',
                    value: '男',
                  },
                  {
                    label: '女',
                    value: '女',
                  },
                ],
              },
            },
          },
        ],
        form,
      }}
      toolBar={{
        prefixNode: (
          <>
            <Button
              onClick={() => {
                const formValues = form.getFieldsValue();
                console.log('--formValues--:', formValues);
              }}
            >
              获取搜索表单值
            </Button>
          </>
        ),
        onColumnsChange: handleColumnsChage,
      }}
      operate={[
        {
          text: '改名',
          key: 'rename',
          onClick(record, index) {},
          hidden(record, index) {
            return index === 0;
          },
        },
        {
          text: '删除',
          key: 'del',
          onClick(record, index) {},
          // hidden(record, index) {
          //   return true;
          // },
          disabled(record, index) {
            return index === 0;
          },
        },
        {
          text: '编辑2',
          key: 'edit',
          onClick(record, index) {
            console.log('--编辑2--record--:', record);
          },
          hidden(record, index) {
            // return !record.name.includes('15');
            return false;
          },
        },
        {
          text: '详情',
          key: 'detial',
          onClick(record, index) {
            console.log('--详情--record--:', record);
          },
          hidden(record, index) {
            // return !record.name.includes('15');
            return false;
          },
        },
      ]}
      request={async ({ page = {} }, searchValue) => {
        const { pageIndex = 1, pageSize = 10 } = page;
        await new Promise((resolve) => {
          setTimeout(() => resolve(1), 2000 * Math.random());
        });

        const start = (pageIndex - 1) * pageSize;
        const end = start + pageSize;

        let result = mockData
          .filter((v) => {
            return (
              v.name.includes(searchValue?.name ?? '') &&
              v.gender.includes(searchValue?.gender ?? '')
            );
          })
          .map((v) => ({ ...v }));

        return {
          list: result.slice(start, end),
          total: result.length,
        };
      }}
    />
  );
}
